import React, { useState, useEffect } from'react';
import './guahao.css';
import axios from 'axios';
import { LeftOutline } from 'antd-mobile-icons';
import { useNavigate } from "react-router-dom";
// 挂号记录组件
function guahao() {
    const [list, setList] = useState([]);
    const [confirmVisible, setConfirmVisible] = useState({ index: null, visible: false });
    const navigate = useNavigate();
    // 定义获取数据的函数
    const getList = () => {
        axios.get('http://127.0.0.1:3000/qjx_tijian')
           .then(res => {
                // 假设接口返回的数据结构中有 data 字段存储实际数据
                // 为每个记录添加一个显示状态
                const newList = res.data.data.map(item => ({...item, isVisible: true }));
                setList(newList);
            })
           .catch(error => {
                console.error('获取数据失败:', error);
            });
    };

    useEffect(() => {
        getList();
    }, []); // 传入空数组作为依赖项，确保 useEffect 只在组件挂载时执行一次

    // 显示确认框
    const showConfirm = (index) => {
        setConfirmVisible({ index, visible: true });
    };

    // 确认取消挂号记录
    const confirmCancelRecord = () => {
        const newList = [...list];
        newList[confirmVisible.index].isVisible = false;
        setList(newList);
        setConfirmVisible({ index: null, visible: false });
    };

    // 取消确认
    const cancelConfirm = () => {
        setConfirmVisible({ index: null, visible: false });
    };

    return (
        <div>
            <div className='y_one'>
                            <p style={{ marginTop: '3px' }} onClick={() => navigate('/home/mind')}>
                                <LeftOutline fontSize={24} />
                            </p>
                            <h2>挂号记录</h2>
                        </div>
            {list.map((item, index) => (
                item.isVisible && (
                    <div key={index} className='qjx_box1'>
                        <div className="top-row">
                            <span className="time-value">{item.dateTime}</span>
                            <button className="cancel-button" onClick={() => showConfirm(index)}>取消</button>
                        </div>
                        <div className="hospital-row">
                            <div className='qjx_yi'>
                                <svg t="1739340544557" class="icon" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33352" width="100" height="100"><path d="M254.8622 236.2734l128.8203 128.8203V134.8401323042999h111.95148842337375V31.04740904079381l-17.7729-17.7508c-15.9427-15.9427-42.0287-15.9427-57.9713 0l-165.0276 165.0055C238.9195 194.2448 238.9195 220.3308 254.8622 236.2734L254.8622 236.2734zM241.301 249.8567l128.7982 128.8203H139.84564498346194v111.95148842337375H36.074972436604185l-17.7508-17.7729c-15.9427-15.9427-15.9427-42.0507 0-57.9934l165.0055-165.0055C199.2723 233.892 225.3583 233.892 241.301 249.8567L241.301 249.8567zM241.0364 752.8776l129.3275-129.3716H139.84564498346194v-111.40022050716647h-104.07938257993384l-17.7729 17.7508c-15.9427 15.9647-15.9427 42.0287 0 57.9934L183.0209 752.8776C198.9636 768.7982 225.0717 768.7982 241.0364 752.8776L241.0364 752.8776zM254.355 766.1742l129.3275-129.3275v230.49614112458653h111.42227122381476v104.07938257993384l-17.7729 17.7729c-15.9427 15.9647-42.0287 15.9647-57.9713 0l-165.0276-165.0276C238.4123 808.2029 238.4123 782.1169 254.355 766.1742L254.355 766.1742zM757.3098 765.8875l-128.7982-128.7982v230.23153252480705h-111.92943770672545v103.79272326350606l17.7508 17.7729c15.9427 15.9427 42.0287 15.9427 57.9713 0l164.9835-165.0276C773.2745 807.9383 773.2745 781.8302 757.3098 765.8875L757.3098 765.8875zM770.9151 752.3264l-128.8423-128.8423h230.2756339581036V511.57662624035277h103.79272326350606l17.7288 17.7508c15.9868 15.9427 15.9868 42.0287 0 57.9934l-164.9835 165.0055C812.9438 768.269 786.8578 768.269 770.9151 752.3264L770.9151 752.3264zM771.2018 249.3275l-129.3275 129.3495h230.49614112458653v111.40022050716647h104.05733186328555l17.7949-17.7508c15.9427-15.9427 15.9427-42.0287 0-57.9493l-165.0276-165.0276C813.2304 233.3848 787.1224 233.3848 771.2018 249.3275L771.2018 249.3275zM757.839 236.0088l-129.3275 129.3275V134.8401323042999H517.0893054024256v-104.07938257993384l17.7729-17.7508c15.9647-15.9427 42.0287-15.9427 57.9934 0l164.9835 165.0055C773.7817 193.9581 773.7817 220.0441 757.839 236.0088z" p-id="33353" fill="#1afa29"></path></svg>
                            </div>
                            <h3 className="hospital-value">{item.hospital}</h3>
                        </div>
                        <div className="address-row">
                            <span className="distance-value">{item.distance}</span>
                            <span className="separator">|</span>
                            <span className="address-value">{item.address}</span>
                        </div>
                        <div className="department-row">
                            <span className="label">科室:</span>
                            <span className="department-value">{item.department}</span>
                            <span className="label ml-10">医师:</span>
                            <span className="doctor-value">{item.doctor}</span>
                        </div>
                        <div className="patient-row">
                            <span className="label">就诊人:</span>
                            <span className="patient-value">{item.patient}</span>
                            <span className="label ml-10">就诊日期:</span>
                            <span className="visit-date-value" style={{ color: '#007AFF' }}>{item.visitDate}</span>
                        </div>
                        <div className="amount-row">
                            <span className="label">金额:</span>
                            <span className="amount-value">￥{item.amount}</span>
                            <span className="label ml-10">支付方式:</span>
                            <span className="payment-value">{item.paymentMethod}</span>
                        </div>
                    </div>
                )
            ))}
            {confirmVisible.visible && (
                <div className="confirm-modal">
                    <div className="confirm-content">
                        <p>确认取消吗？</p>
                        <div className="confirm-buttons">
                            <button onClick={cancelConfirm}>取消</button>
                            <button onClick={confirmCancelRecord}>确认</button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}

export default guahao;